<template>
	<div class="web-terminal" ref="webterminal" id="webterminal">
	</div>
</template>

<script setup>
	import 'xterm/css/xterm.css'
	import {FitAddon} from "xterm-addon-fit";
	import { Terminal } from 'xterm';
	import { onMounted, onUnmounted, onBeforeMount } from 'vue';
	import Bridge from '@/utils/dsbridge.js'
	// let webSocketObject = null;
	let terminal = null;
	
	onBeforeMount(()=> {
		
	})
	
	onMounted(() => {
		console.log("webterminal======>onMounted");
		Bridge.call("logApi.startLogCat","")
		let terminalContainer = document.getElementById('webterminal')
		const fitAddon = new FitAddon()
		terminal = new Terminal({
			cursorBlink: true, // 光标闪烁
			cursorStyle: "underline", // 光标样式  null | 'block' | 'underline' | 'bar'
			fontSize:20
		})
		terminal.open(terminalContainer)
		terminal.loadAddon(fitAddon)
		fitAddon.fit()
		terminal.focus()
		Bridge.register('showLogCat',function(log){
			terminal.writeln(log)
		})
	})
	
	onUnmounted(() => {
		Bridge.call("logApi.stopLogCat","")
		console.log("webterminal======>onUnmounted");
	})
	
	// const initWebSocket = function(){
	// 	if("WebSocket" in window){
	// 		console.log("您的浏览器支持WebSocket");
	// 		webSocketObject	= new WebSocket("ws://localhost:8080");
	// 	} else {
	// 		console.log("您的浏览器不支持WebSocket");
	// 	}
	// }
</script>

<style lang="less">
	.web-terminal{
		width: 100%;
		height: 100%;
	}
</style>